<template>
    <div class="menu">
        <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            shape="round"
            background="#0c34ba"
            @search="onSearch"
        />
        <div class="menu-box">
            <div class="menu-list">
                <div
                    class="list"
                    :class="{ active: index === activeKey }"
                    v-for="(item, index) in asideBarData"
                    :key="index"
                    @click="cliakList(index)"
                >
                    <img
                        :src="
                            index !== activeKey
                                ? item.inactiveIcon
                                : item.activeIcon
                        "
                        alt=""
                    />
                    <span>{{ item.title }}</span>
                </div>
            </div>

            <div class="menu-content">
                <div class="menu-content-box">
                    <div
                        class="content-box"
                        v-for="(item, index) in commodity_data"
                        :key="index"
                    >
                        <ProItem :information="item"></ProItem>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ProItem from '../components/ProItem.vue'
export default {

    name: 'Menu',
    components: {
        ProItem
    },
    data() {

        return {
            //是否关闭骨架屏
            isLoaded: false,

            //搜索关键字
            value: '',

            //选中项的索引
            activeKey: 0,

            asideBarData: [{
                title: '推荐',
                value: 1,
                inactiveIcon: require('../assets/icons_09.gif'),
                activeIcon: require('../assets/icons_21.gif')
            },
            {
                title: '拿铁',
                value: "latte",
                inactiveIcon: require('../assets/icons_05.gif'),
                activeIcon: require('../assets/icons_19.gif')
            },
            {
                title: '咖啡',
                value: "coffee",
                inactiveIcon: require('../assets/icons_03.gif'),
                activeIcon: require('../assets/icons_18.gif')
            },
            {
                title: '瑞纳冰',
                value: "rena_ice",
                inactiveIcon: require('../assets/icons_07.gif'),
                activeIcon: require('../assets/icons_20.gif')
            },
            {
                title: '水果茶',
                value: "fruit_tea",
                inactiveIcon: require('../assets/icons_11.gif'),
                activeIcon: require('../assets/icons_22.png')
            }
            ],

            // 商品数据
            commodityData: {},
            commodity: null
        }
    },
    methods: {
        //切换商品分类
        cliakList(index) {
            if (this.activeKey === index) {
                return
            }
            this.activeKey = index;
        },

        //获取商品类型数据
        getTypeData() {
            // 读取 会话存储，
            this.commodityData = JSON.parse(sessionStorage.getItem("commodityData"));
            // 没有存储过数据，就发请求
            if (this.commodityData === null) {
                this.commodityData = {};
            }
            // 有就获取 会话存储的数据
            else {
                
                return
            }
            // for循环 请求每个种类的商品数据
            for (let i = 0; i < this.asideBarData.length; i++) {
                this.axios({
                    method: 'get',
                    url: '/typeProducts',
                    params: {
                        // appkey: 'U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=',
                        key: i !== 0 ? 'type' : 'isHot',
                        value: this.asideBarData[i].value,
                    }
                }).then(res => {
                    

                    // 将请求到的数据存储在commodityData中
                    this.commodityData[this.asideBarData[i].value] = res.data.result;

                    // 全部请求结束，过滤数据
                    if (i === this.asideBarData.length - 1) {
                        this.commodity = this.commodityData[this.asideBarData[this.activeKey].value]
                    }
                    // 会话存储
                    sessionStorage.setItem("commodityData", JSON.stringify(this.commodityData));

                }).catch(err => {
                    
                })
            }
        },

        // 搜索 商品 确认跳转 
        onSearch(val) {
            if (this.value.trim()) {
                this.$router.push({ name: 'SearchForproducts', query: { val } });
            }
            else { this.value = "" }
        },
    },
    // 属性计算
    computed: {
        // 被展示的商品 的数据
        commodity_data() {
            this.commodity = this.commodityData[this.asideBarData[this.activeKey].value];
            return this.commodity
        }
    },
    // 初始化钩子
    created() {
        //获取 各个类型商品 的 数据
        this.getTypeData();
    },
}
</script>

<style lang="less" scoped>
.menu {
    .menu-content {
        overflow: scroll;
        flex: 1;
        height: 100%;
        background-color: #fff;

        .menu-content-box {
            display: flex;
            padding: 10px;
            padding-bottom: 0;
            flex-wrap: wrap;
        }
    }

    .content-box {
        width: calc(~'50% - 10px + 5px');
        margin-right: 10px;
        margin-bottom: 12px;
        background-color: #fff;

        &:nth-child(2n) {
            margin-right: 0;
        }
    }

    .menu-box {
        position: fixed;
        top: 54px;
        bottom: 50px;
        left: 0;
        right: 0;
        display: flex;
    }

    .menu-list {
        width: 100px;
        height: 100%;
        background-color: #fbfbfb;
    }

    .list {
        display: flex;
        padding: 8px;
        align-items: center;
        justify-content: space-between;

        &.active {
            position: relative;
            color: #0c34ba;
            font-weight: 600;
            font-size: 14px;
        }

        &.active::after {
            content: '';
            width: 5px;
            height: 80%;

            background-color: #0c34ba;
            position: absolute;
            top: 10%;
            right: 0;
        }

        img {
            width: 60%;
        }

        span {
            width: 16px;
            margin-right: 5px;
            display: block;
            background-color: #fff;
        }
    }
}
</style>